/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import {View, Linking,} from 'react-native';
import { Icon,  List, Button, InputItem, Tabs } from 'antd-mobile-rn';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader } from '../../../library/comp';
import { Dialog, Http, PageBase } from '../../../library/func';
import Design from '../../../design';
import Config from '../../../config';

/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
 export default class RepairDetail extends PageBase {
    constructor(props) {
        super(props);
        this.state = {
            imagePath:[
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544240678638&di=0fddd3c14852a14c7e4a68405c452ff0&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D890c50c9db00baa1ae214ff82f79d367%2Fcc11728b4710b912decd6bdbc9fdfc0392452282.jpg',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544240678638&di=0fddd3c14852a14c7e4a68405c452ff0&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D890c50c9db00baa1ae214ff82f79d367%2Fcc11728b4710b912decd6bdbc9fdfc0392452282.jpg',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544240678638&di=0fddd3c14852a14c7e4a68405c452ff0&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D890c50c9db00baa1ae214ff82f79d367%2Fcc11728b4710b912decd6bdbc9fdfc0392452282.jpg',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544240678638&di=0fddd3c14852a14c7e4a68405c452ff0&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D890c50c9db00baa1ae214ff82f79d367%2Fcc11728b4710b912decd6bdbc9fdfc0392452282.jpg',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544240678638&di=0fddd3c14852a14c7e4a68405c452ff0&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D890c50c9db00baa1ae214ff82f79d367%2Fcc11728b4710b912decd6bdbc9fdfc0392452282.jpg',
            ],
        };
    }

    /************************************************************************************ Event */
    // 打电话
    call=()=>{
        return Linking.openURL('tel:10086')
    }

    /************************************************************************************ Render */
    render(){
        return(
            <CPage>

                <CScroll bg='#efeff4' mt='96'>

                    <CCenter py='20' bg='#fff' mt='20'>
                        <CIcon icon={ Design.icon['server-xiu'] } color='#0C6' w='45' h='45' mr='6'></CIcon>
                        <CText size='26' color='#0C6'>已完成</CText>
                        <CText size='26' color='#0C6' ml='20'>有疑问？</CText>
                        <CText size='26' color='#0C6' ml='20' onPress={e=>{ this.call() }}>点击联系物业</CText>
                    </CCenter>

                    {/* 维修信息 */}
                    <CRow h='80' y='center'>
                        <CText size='26' px='20'>完成信息</CText>
                    </CRow>
                    <CColumn bg='#fff' px='40'>
                        <CRow py='20' style={{ borderBottomColor:"#efeff4", borderBottomWidth:1 }}>
                            <CLine>
                                <CText size='26' color='#333'>报修单号：</CText>
                            </CLine>
                            <CLine x='right'>
                                <CText size='26' color='#999'>89898989</CText>
                            </CLine>
                        </CRow>
                        <CRow py='20' style={{ borderBottomColor:"#efeff4", borderBottomWidth:1 }}>
                            <CLine>
                                <CText size='26' color='#333'>受理时间：</CText>
                            </CLine>
                            <CLine x='right'>
                                <CText size='26' color='#999'>2018.12.08  12:00</CText>
                            </CLine>
                        </CRow>
                        <CRow py='20' style={{ borderBottomColor:"#efeff4", borderBottomWidth:1 }}>
                            <CLine>
                                <CText size='26' color='#333'>完成时间：</CText>
                            </CLine>
                            <CLine x='right'>
                                <CText size='26' color='#999'>2018.12.08  13:30</CText>
                            </CLine>
                        </CRow>
                        <CRow py='20' style={{ borderBottomColor:"#efeff4", borderBottomWidth:1 }}>
                            <CLine>
                                <CText size='26' color='#333'>维修人员：</CText>
                            </CLine>
                            <CLine x='right'>
                                <CText size='26' color='#999'>某维</CText>
                            </CLine>
                        </CRow>
                        <CRow py='20' style={{ borderBottomColor:"#efeff4", borderBottomWidth:1 }}>
                            <CLine>
                                <CText size='26' color='#333'>维修人电话：</CText>
                            </CLine>
                            
                            <CLine x='right'>
                                <CText size='26' color='#999'>15130305503</CText>
                            </CLine>
                        </CRow>

                        <CRow py='20'>
                            <CText size='26' color='#333'>完成图片</CText>
                        </CRow>
                        <CBetween pb='20' style={{marginLeft:-8}}>

                            {/* 循环已选图片 */}
                            {   this.state.imagePath.map( ( item,index ) => {
                                    return(
                                        <CHand w='120' h='120' ml='16' bg='#fff' x='center' y='center' key={index}>
                                            <CHand w='120' h='120' ba='1 #eee' onPress={e=>this.nav.navigate('OpenImage')}>
                                                <CImage source={{uri:item}} w='120' h='120' resizeMode={'contain'}></CImage>
                                            </CHand>
                                        </CHand>
                                    )
                                })
                            }

                        </CBetween>
                    </CColumn>

                    {/* 报修信息 */}
                    <CRow h='80' y='center'>
                        <CText size='26' px='20'>报修信息</CText>
                    </CRow>
                    <CColumn bg='#fff' px='40' mb='60'>
                        <CBetween py='20' style={{ borderBottomColor:"#efeff4", borderBottomWidth:1 }}>
                            <CLine>
                                <CText size='26' color='#333'>报修时间：</CText>
                            </CLine>
                            <CLine x='right'>
                                <CText size='26' color='#999'>2018.12.08  12:00</CText>
                            </CLine>
                        </CBetween>
                        <CBetween py='20' style={{ borderBottomColor:"#efeff4", borderBottomWidth:1 }}>
                            <CLine>
                                <CText size='26' color='#333'>报修类型：</CText>
                            </CLine>
                            <CLine x='right'>
                                <CText size='26' color='#999'>家庭</CText>
                            </CLine>
                        </CBetween>
                        <CBetween py='20' style={{ borderBottomColor:"#efeff4", borderBottomWidth:1 }}>
                            <CLine>
                                <CText size='26' color='#333'>联系人：</CText>
                            </CLine>
                            <CLine x='right'>
                                <CText size='26' color='#999'>某报修</CText>
                            </CLine>
                        </CBetween>
                        <CBetween py='20' style={{ borderBottomColor:"#efeff4", borderBottomWidth:1 }}>
                            <CLine>
                                <CText size='26' color='#333'>联系人电话：</CText>
                            </CLine>
                            <CLine x='right'>
                                <CText size='26' color='#999'>15130305503</CText>
                            </CLine>
                        </CBetween>
                        <CBetween py='20' style={{ borderBottomColor:"#efeff4", borderBottomWidth:1 }}>
                            <CLine>
                                <CText size='26' color='#333'>维修地址：</CText>
                            </CLine>
                            <CLine x='right'>
                                <CText size='26' color='#999'>某地址</CText>
                            </CLine>
                        </CBetween>

                        <CRow py='20'>
                            <CText size='26' color='#333'>报修图片</CText>
                        </CRow>
                        <CBetween pb='20' style={{marginLeft:-8}}>

                            {/* 循环已选图片 */}
                            {   this.state.imagePath.map( ( item,index ) => {
                                    return(
                                        <CHand w='120' h='120' ml='16' bg='#fff' x='center' y='center' key={index}>
                                            <CHand w='120' h='120' ba='1 #eee' onPress={e=>this.nav.navigate('OpenImage')}>
                                                <CImage source={{uri:item}} w='120' h='120' resizeMode={'contain'}></CImage>
                                            </CHand>
                                        </CHand>
                                    )
                                })
                            }

                        </CBetween>
                        
                        <CRow py='20' style={{ borderBottomColor:"#efeff4", borderBottomWidth:1, width:'100%' }}>
                            <CText size='26' color='#333'>描述</CText>
                        </CRow>
                        <CText py='20' color='#999'>报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述报修描述</CText>
                        
                    </CColumn>

                    {/* 底部 */}
                    <CRow h='100' y='center' x='center'  bg='#fff55' bt='1 #efeff4'>
                        <CHand onPress={e=>{ this.call() }}>
                            <CText color='#999' size='22'>联系物业</CText>
                        </CHand>
                    </CRow>

                </CScroll>

                {/* header */}
				<PHeader nav={this.nav}>报修详情</PHeader>

                

            </CPage>
        )
    }
}
